<template>
  <div    :type="type" v-if="showWrap" >
    <div class="alert alert-warning mt-3 bg-warning"  :class="showContent ?'fadein':'fadeout'" v-if="type=='warning'">
    <div class="flex-1">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 mx-2 stroke-current"> 
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>                         
        </svg> 
        <label v-html="msg"></label>
    </div>
    </div>

    <div class="alert alert-error  mt-3 " style=" background:#f7e3e3"  :class="showContent ?'fadein':'fadeout'" v-if="type=='error'">
    <div class="flex-1">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-6 h-6 mx-2 stroke-current">    
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>                      
        </svg> 
        <label v-html="msg"></label>
    </div>
    </div>


<div class="alert alert-success mt-3"  style="background-color: #ccefeb;" :class="showContent ?'fadein':'fadeout'" v-if="type=='success'">
  <div class="flex-1">
   
    <svg t="1644037441539" class="w-6 h-6 mx-2 stroke-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18904" width="200" height="200"><path d="M512 0C228.430769 0 0 228.430769 0 512s228.430769 512 512 512 512-228.430769 512-512S795.569231 0 512 0z m0 945.230769C271.753846 945.230769 78.769231 752.246154 78.769231 512S271.753846 78.769231 512 78.769231s433.230769 192.984615 433.230769 433.230769-192.984615 433.230769-433.230769 433.230769z" p-id="18905" fill="#029485"></path><path d="M716.8 330.830769l-208.738462 248.123077c-15.753846 15.753846-43.323077 19.692308-59.076923 7.876923L299.323077 472.615385c-15.753846-11.815385-43.323077-7.876923-55.138462 7.876923-11.815385 15.753846-7.876923 43.323077 7.876923 55.138461l149.661539 114.215385c19.692308 15.753846 47.261538 23.630769 74.830769 23.630769 35.446154 0 70.892308-15.753846 94.523077-43.323077l208.738462-248.123077c15.753846-15.753846 11.815385-43.323077-3.938462-55.138461-19.692308-15.753846-43.323077-15.753846-59.076923 3.938461z" p-id="18906" fill="#029485"></path></svg>
    <label v-html="msg"> </label>
  </div>
</div>

    

  </div>
</template>

 <script>
export default {
  name: 'Alert',
 data() {
     return {
      msg: '...',
      type:'',
      showWrap:false
    }
    
},
 methods: {
     
   }
}
</script>
 